<template>
    <div class="login">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  <el-form-item label="用户名" prop="username">
    <el-input type="text" v-model="ruleForm.username" ></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="ruleForm.password"></el-input>
  </el-form-item>
 
  <el-form-item>
    <el-button type="primary" @click="login()">登录</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</template>
<script>
export default {
    data(){
        return{
            ruleForm:{
                username:"",
                password:"",
            },
            rules:{
                username:[
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {min:3,max:6,message:'请输入3-6位字符',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入用户名',trigger:'blur'},
                    {min:3,max:6,message:'请输入3-6位字符',trigger:'blur'}
                ]
            }
        }
    },
   methods:{
      login(){
         this.$refs.ruleForm.validate(async valid=>{
              if(valid){
                  const {data}=await this.axios.post('/login',this.ruleForm)
                  if(data.meta.status===200){
                       sessionStorage.token=data.data.token
                       this.$router.push('/home')
                       this.$message.success(data.meta.msg)
                  }else{
                    this.$message.error(data.meta.msg)
                  }
              }else{
                 console.log('校验不符合');
              }
         })
      }
   }
}
</script>